<template>
  <div>
    <form class="inqu-form">
      <div class="inqu-div">
        <!--请输入航班号开始-->
        <div class="i-f-inp">
          <label class="i-f-label">
            <i class="iconfont">&#xe626;</i>
          </label>
          <div class="i-f-div">
            <input type="text" class="i-f-input" placeholder="请输入航班号" v-model="addFligNo"/>
            <!-- <span class="qr-code">
              <i class="iconfont l-h-i">&#xe605;</i>
            </span> -->
          </div>
        </div>
        <!--请输入航班号结束-->

        <!--请输入航班日期开始-->
        <div class="i-f-inp">
          <label class="i-f-label">
            <i class="iconfont">&#xe627;</i>
          </label>
          <div class="i-f-div i-f-date">
            <input type="date" class="i-f-input" placeholder="请输入航班日期" v-model="form.lclDptDate" ref="dateDayTime"/>
          </div>
        </div>
        <!--请输入航班日期结束-->

        <!--请输入购票证件号或票号开始-->
        <div class="i-f-inp">
          <label class="i-f-label">
            <i class="iconfont">&#xe654;</i>
          </label>
          <div class="i-f-div i-f-div-bottom">
            <input type="text" class="i-f-input" placeholder="请输入购票证件号" v-model.trim="idNoTUC"/>
          </div>
        </div>
        <!--请输入购票证件号或票号结束-->

        <!--提示错误显示开始-->
        <div class="i-f-inp">
          <span class="error"></span>
        </div>
        <!--提示错误显示结束-->
      </div>

      <!--提交按钮开始-->
      <div class="i-f-inp">
        <form-btn @handleClick="subInquire" name="查询" :fontStyle="true"/>
      </div>
      <!--提交按钮结束-->
    </form>
  </div>
</template>

<script>
import formBtn from 'components/inquiry-btn/inquiry-btn'
import Verify from 'util/verify'
import DateTime from 'util/date'
import {mapActions, mapState} from 'vuex'
export default {
  components: {
    formBtn
  },
  data () {
    return {
      form: {
        flightNo: '', // 航班号
        lclDptDate: '', // 航班日期
        idNo: '', // 证件号
        timeSpan: '0'
      }
    }
  },
  computed: {
    addFligNo: {
      get: function () {
        return this.form.flightNo
      },
      set: function (val) {
        if (val.length < 3 || /^3U/.test(val) || !val) {
          this.form.flightNo = val
        } else {
          this.form.flightNo = `3U${val}`
        }
      }
    },
    idNoTUC: {
      get () {
        return this.form.idNo
      },
      set (val) {
        this.form.idNo = val.toUpperCase()
      }
    },
    ...mapState('searchData/', ['search'])
  },
  methods: {
    ...mapActions('searchData/', ['setSearchIofo']),
    initDate () {
      let dateTime = new DateTime()
      this.form.lclDptDate = dateTime.initDate(new Date())
      if (this.form.lclDptDate !== '') {
        this.$refs.dateDayTime.removeAttribute('placeholder')
      }
    },
    subInquire () {
      const formInquiry = new Verify()
      let title = formInquiry.formDataVerifi(this.form).msg
      if (title === '验证通过') {
        this.setSearchIofo(this.form)
        this.$emit('inquiryDta', this.form)
      } else {
        alert(title)
      }
    },
    initForm () {
      if (this.search !== null) {
        this.form = this.search
        console.log(this.form)
      }
    }
  },
  mounted () {
    this.initDate()
    this.initForm()
  }
}
</script>

<style lang="scss" scoped>
@import './inp.scss';
body,html {
  height: 100%;
}
input[type='date']:after {
  font-size: .7rem;
  color: #aaa;
  content: attr(placeholder);
  position: absolute;
  width: 50%;
  left: 31%;
  top: 50%;
  transform: translate(-50%, -50%);
}
input[type='date'], input[type='time'] {
  -webkit-appearance: none;
}

.i-f-inp {
  .i-f-date {
    border-bottom: .06rem solid $colorBorder;
  }
}
</style>
